<template>
  <div class="app-container">
    <div class="top-banner">
      互联网应用服务
      <div class="banner-user">
        <div class="banner-user-avatar">{{ user.nickName[0] }}</div>
        您好,
        <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
          <div class="avatar-wrapper">
            <div>{{ user.nickName }}</div>
            <i class="el-icon-caret-bottom" style="margin-left: 10px !important;"/>
          </div>
          <el-dropdown-menu slot="dropdown">
            <router-link to="/system/application" v-if="user.admin">
              <el-dropdown-item>系统设置</el-dropdown-item>
            </router-link>
            <router-link to="/user/profile">
              <el-dropdown-item>个人中心</el-dropdown-item>
            </router-link>
            <!--<el-dropdown-item @click.native="open = true">
              <span>修改密码</span>
            </el-dropdown-item>-->
            <el-dropdown-item divided @click.native="logout">
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <div class="body-container">
      <div class="left-container">
        <!--本月境内 / 外舆情报送数量-->
        <div class="normal-model">
          <div class="model-label">
            <div class="circle"></div>
            本月境内 / 外舆情报送数量
          </div>
          <div class="model-body">
            <div class="model-item" style="margin-left: 12px">
              <img src="@/assets/images/depts.png" alt="" class="item-icon">
              <div class="info">
                <div class="info-label">全部</div>
                <div class="info-value">{{ quantity.deptNum ? quantity.deptNum.inNum : 0 }} / {{ quantity.deptNum ?
                  quantity.deptNum.outNum : 0 }}
                </div>
              </div>
            </div>
            <div class="model-item">
              <img src="@/assets/images/person.png" alt="" class="item-icon">
              <div class="info">
                <div class="info-label">个人</div>
                <div class="info-value">{{ quantity.userNum ? quantity.userNum.inNum : 0 }} / {{ quantity.userNum ?
                  quantity.userNum.outNum : 0 }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--报送类别占比-->
        <div class="left-model">
          <div class="img-title">报送类别占比</div>
          <div class="left-model-container">
            <div class="pieChart"></div>
            <div ref="pieChart" style="height: 375px; width: 368px"></div>
          </div>
        </div>

        <!--工作便签-->
        <!--<div class="left-model">
          <div class="img-title">
            工作便签
            <div class="el-icon-circle-plus-outline icon-style" @click="tipsOpen = true"></div>
          </div>
          <div class="left-model-container" style="height: 354px">
            <div class="header-bar">
              <div class="bar-title">待办</div>
              <div class="bar-btn" @click="tipsOpen = true">
                <div class="bar-tips" v-if="tipsList.length">{{tipsList.length}}</div>
                <div class="el-icon-arrow-right"></div>
              </div>
            </div>
            <div style="margin-top: 80px">
              <Calendar></Calendar>
             &lt;!&ndash; <img src="@/assets/images/date.png" alt="" style="height: 243px; width: 328px; margin: 20px">&ndash;&gt;
            </div>
          </div>
        </div>-->
        <div class="tip-container">
          <div class="tip-model-title">
            <div class="el-icon-circle-plus-outline icon-style" @click="handleOpenTipsDialog"></div>
            <div class="btn-container">
              <div class="btn" :class="tipsType === 0 ? 'left-btn-select' : 'left-btn'" @mouseenter="getTipsList(0)">
                待办便签
              </div>
              <div class="btn" :class="tipsType === 1 ? 'right-btn-select' : 'right-btn'" @mouseenter="getTipsList(1)">
                已办便签
              </div>
            </div>
            <div class="more" @click="tipsOpen = true">更多</div>
          </div>
          <div ref="tipContainer" class="left-model-container tip-item-container" @mouseenter="handleMouseEnter"
               @mouseleave="handleMouseLeave">
            <ul v-if="tipsList.length" :class="{ marquee_top: animate }" ref="tipList">
              <li class="tip-item" v-for="(item, i) in tipsList" :key="i" @click="selectTips(item, item.status)">
                <div class="tip-circle" v-if="item.status === '0'"></div>
                <div class="tip-context" :style="{cursor: tipsType === 0 ? 'pointer' : 'default'}">
                  <span v-if="item.shortNoteTime"> {{ item.shortNoteTime.split('T')[0] }} {{ item.content }}</span>
                  <span v-else>{{ item.content }}</span>
                </div>
              </li>
            </ul>
            <div v-else
                 style="width: inherit; height: inherit; display: flex; align-items: center; justify-content: center; color: #FFF">
              暂无数据
            </div>
            <!--<div class="header-bar">
              <div class="bar-title">待办</div>
              <div class="bar-btn" @click="tipsOpen = true">
                <div class="bar-tips" v-if="tipsList.length">{{tipsList.length}}</div>
                <div class="el-icon-arrow-right"></div>
              </div>
            </div>
            <div style="margin-top: 80px">
              <Calendar></Calendar>
            </div>-->
          </div>
        </div>

      </div>
      <div class="model-container">
        <div class="model-content">
          <div v-if="list.length" style="height: 100%; overflow-y: scroll;">
            <div v-for="(model, index) in list" :key="index">
              <div class="model">
                <div class="model-title">
                  <div class="circle"></div>
                  {{ model.categoryName }}
                </div>
                <div class="list-container">
                  <div style="display: inline-flex; margin-bottom: 30px" v-for="(item, i) in model.applicationInfos" :key="i"
                       @click="navTo(item)">
                    <div class="item-container" v-if="item.status === 1">
                      <div class="icon-container">
                        <img :src="getImg(item.icon)" alt="" width="75px" height="75px">
                      </div>
                      <div class="item-name">{{ item.name }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        <!--  <div class="empty" v-else-if="loading">
            <div class="empty-container">
              <img src="@/assets/images/empty.png" alt="" width="100px" height="100px">
              <div>正在加载，请稍后</div>
            </div>
          </div>-->
          <div class="empty" v-else>
            <div class="empty-container">
              <img src="@/assets/images/empty.png" alt="" width="100px" height="100px">
              <div>暂无应用，请至应用管理中添加或联系管理员授权</div>
            </div>
          </div>
        </div>

        <div class="bottom-banner">
          <div class="tab" @click="appDrawer = true">
            <img class="tab-icon" src="@/assets/images/app.png" alt="">
            <div class="tab-label">应用管理</div>
          </div>

          <div class="tab" @click="toolDrawer = true">
            <img class="tab-icon" src="@/assets/images/tool.png" alt="">
            <div class="tab-label">工具箱</div>
          </div>
        </div>
      </div>
      <div class="right-container">
        <!--各应用使用频次统计-->
        <div class="right-model">
          <div class="img-title">各应用使用频次统计</div>
          <div class="right-model-container">
            <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 100%">
              <div class="app-item" v-for="(item, i) in rankList" :key="i">
                <div class="app-info">
                  <div class="app-rank">NO.{{ i + 1 }}</div>
                  <div class="app-name">{{ item.name }}</div>
                  <div class="app-time" :style="{ color: i > 2 ? '#D4EDFB' : '#FFB687' }">
                    {{ item.frequency }}
                    <div class="count-item"> 次</div>
                  </div>
                </div>
                <div class="app-bar">
                  <div class="app-count"
                       :style="{ width: `${item.ratio * 100}%`, background: i > 2 ? 'linear-gradient(270deg, #40A6FA 0%, #668FC1 22%, rgba(93,152,212,0.27) 100%)' : 'linear-gradient(270deg, #E9AA88 0%, #A35843 21%, rgba(169,89,66,0.35) 100%)' }">
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
        <!--运营保障-->
        <div class="normal-model">
          <div class="model-label">
            <div class="circle"></div>
            运营保障
          </div>
          <div class="tip"
               style="font-size: 14px; display: flex; align-items: center; justify-content: center; font-weight: 700;">
            拉萨网安支队队长：
            <div class="model-body" style="margin-top: 0px;">
              <div class="model-item" style="margin-right: 20px">
                <img src="@/assets/images/phone.png" alt="" class="item-small-icon">
                <div class="info">
                  <div class="info-msg">{{ operationLink }}</div>
                  <!--                  <div class="info-msg">{{link}}</div>-->
                </div>
              </div>
            </div>
          </div>
          <div class="tip"
               style="font-size: 14px; display: flex; align-items: center; justify-content: center; font-weight: 700;">
            技术人员支撑电话：
            <div class="model-body" style="margin-top: 0px">
              <div class="model-item" style="margin-right: 20px">
                <img src="@/assets/images/phone.png" alt="" class="item-small-icon">
                <div class="info">
                  <div class="info-msg">{{ technologyLink }}</div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <!--代办弹窗-->
    <div :class="tipsOpen ? 'tip-dialog' : 'hide-dialog'" v-show="tipsOpen">
      <img src="@/assets/images/icon-close.png" class="close-icon" @click="cancel()">
      <div class="tips-left">
        <div class="tips-title">添加待办</div>
        <div class="form-container">
          <el-form ref="tipsForm" :model="tipsForm" label-width="0" :rules="tipsRules">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item prop="shortNoteTime">
                  <el-date-picker v-model="tipsForm.shortNoteTime" type="date" placeholder="选择日期"
                                  :picker-options="pickerOptions">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item prop="content">
              <el-input type="textarea" v-model="tipsForm.content" resize="none" placeholder="请输入待办内容" maxlength="500"
                        show-word-limit></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" style="float: right;">添加</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <img src="@/assets/images/arrow.png" class="arrow-icon">
      <div class="tips-right">
        <div class="tips-title">
          <div v-for="(tabItem, i) in tabs" :key="i" :class="i === tipsType ? 'tab-normal' : 'tab-select'"
               @click="getTipsList(i)">
            {{ tabItem }}
          </div>
        </div>
        <div class="tips-list">
          <div v-for="(item, i) in tipsOptions" :key="i" class="list-item">
            <div :class="item.status === '1' ? 'select-circle' : 'normal-circle'"
                 @click="selectTips(item, item.status)">
              <div class="el-icon-check check-icon" v-if="item.status === '1'"></div>
            </div>
            <div class="tip-text" :style="{ cursor: item.status === '0' ? 'pointer' : 'auto' }"
                 @dblclick="handelEdit(item, i)">
              <el-form v-show="item.canEdit === true" ref="editForm" :model="editForm" label-width="0"
                       :rules="editRules">
                <el-form-item prop="content">
                  <el-input type="textarea" :ref="'editInput' + i" v-model="editForm.content" resize="none"
                            placeholder="请输入待办内容" maxlength="500" show-word-limit
                            @keydown.enter.native="handleEdit(item)"
                            @blur.stop="handleBlueEdit($event, item)"></el-input>
                </el-form-item>
              </el-form>
              <div v-show="!item.canEdit">{{ item.content }}</div>
              <div class="tip-date" v-if="item.shortNoteTime">{{ item.shortNoteTime.split('T')[0] }}</div>
            </div>
            <img src="@/assets/images/remove.png" :height="18" alt="" style="cursor: pointer"
                 @click="handleRemoveTip(item)"/>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="修改密码" :visible.sync="open" :close-on-click-modal="false" close-on-press-escape destroy-on-close
               width="500px">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="原始密码" prop="oldPassword">
          <el-input v-model="form.oldPassword"></el-input>
        </el-form-item>
        <el-form-item label="重置密码" prop="newPassword">
          <el-input v-model="form.newPassword"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password">
          <el-input v-model="form.password"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="pswCancel()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>

    <!--应用管理抽屉-->
    <el-drawer title="应用管理" :visible.sync="appDrawer" direction="rtl" :before-close="handleClose">
      <div class="app-item-container">
     <!--   <el-switch
          class="tableScopeSwitch"
          style="display: block"
          v-model="isAllIn"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="一键安装"
          inactive-text="一键卸载" @change="appAction">
        </el-switch>-->
<!--        <div :class="isAllIn ? 'app-uninstall' : 'app-install'" @click="appAction"> {{isAllIn ? '一键卸载' : '一键安装'}}</div>-->
      </div>
      <div class="app-item-container" style="margin-bottom: 60px;" v-for="(item, index) in appList" :key="index">
        <div class="app-model">
          <div class="model-title">
            <div class="circle"></div>
            {{ item.categoryName }}
          </div>
          <div class="app-model-item" v-for="(app, i) in item.applicationInfos" :key="i">
            <img class="app-img" :src="getImg(app.icon)" alt="">
            <div class="app-name">{{ app.name }}</div>
            <img v-if="app.status === 1" src="@/assets/images/delete.png" style="cursor: pointer;" :height="30" alt=""
                 @click="handleAction(app)"/>
            <img v-else src="@/assets/images/add.png" :height="30" alt="" style="cursor: pointer;"
                 @click="handleAction(app)"/>
          </div>
        </div>
      </div>
      <div class="app-item-footer" style="background-color: black">
        <div class="footer-btn" :class="isAllIn ? 'is-disabled' : 'check-btn'" @click="appAction(true)">全部添加</div>
        <div class="footer-btn" :class="!isAllIn ? 'is-disabled' : 'check-btn'" @click="appAction(false)">全部取消</div>
      </div>
    </el-drawer>

    <!--工具箱抽屉-->
    <el-drawer title="特色工具集" :visible.sync="toolDrawer" direction="rtl" :before-close="handleClose">

      <div class="tool-item" v-for="(item, i) in toolList" :key="i">
        <img class="tool-img" :src="getImg(item.icon)" alt="">
        <div class="tool-name">{{ item.name }}</div>
        <div class="tool-btn" @click="navTo(item)">打开</div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import {getHomeList, setAppStatus} from "@/api/system/application"
  import {getUserProfile, changePassword} from "@/api/system/user";
  import {checkLogin} from "@/api/login"
  import {
    getQuantity,
    getTypeRate,
    getTipsListData,
    addTips,
    getApps,
    upDateApp,
    getToolsListData,
    getAppsCountListData,
    getLinkInfoData,
    addUse,
    removeTip
  } from "@/api/home"
  import {getToken} from "@/utils/auth";
  import Calendar from "@/components/Calendar"

  export default {
    name: "Index",
    components: {
      Calendar
    },
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          /*     if (this.form.oldPassword !== '') {
                 this.$refs.ruleForm.validateField('oldPassword');
               }*/
          callback();
        }
      };

      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          /*if (this.form.newPassword !== '') {
            this.$refs.ruleForm.validateField('newPassword');
          }*/
          callback();
        }
      };

      var validatePass3 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.newPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };

      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() <= Date.now() - 86400000;
          },
        },
        loading: false,
        // 版本号
        version: "3.8.6",
        date: '',
        list: [],
        user: {},
        open: false,
        form: {
          oldPassword: '',
          newPassword: '',
          password: ''
        },
        rules: {
          oldPassword: [
            {required: true, validator: validatePass, trigger: 'blur'}
          ],
          newPassword: [
            {required: true, validator: validatePass2, trigger: 'blur'}
          ],
          password: [
            {required: true, validator: validatePass3, trigger: 'blur'}
          ]
        },
        tipsRules: {
          shortNoteTime: [
            {required: true, message: '请选择日期', trigger: 'submit‌'},
          ],
          content: [
            {required: true, message: '待办不能为空', trigger: 'submit‌'},
          ],
        },
        rankList: [],
        appDrawer: false,
        toolDrawer: false,
        appList: [],
        toolList: [],
        tipsOpen: false,
        tipsForm: {},
        tipsList: [], // 轮播用
        tipsOptions: [], // 弹窗用
        quantity: {
          deptNum: {},
          userNum: {}
        },
        tipsType: 0,
        tabs: ['待办', '已办'],
        animateTimer: null,
        animate: false, // 控制轮播动画
        removeLoading: false,
        editForm: {},
        editRules: {
          content: [
            {required: true, message: '待办不能为空', trigger: 'submit'},
          ],
        },
        operationLink: "",
        technologyLink: "",
        isAllIn: false
      };
    },
    created() {
      this.getUser()
      checkLogin().then(res => {
        this.loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        if (res.code === 200 && !res.data) {
          // this.getList()
          this.getInOutQuantity()
          this.getType()
          this.getTipsList(0)
          this.getAppsList()
          this.getToolsList()
          this.getAppsCountList()
          this.getLinkInfo()
        } else {
          this.loading.close();
          this.$alert('您的密码超过90天未修改，请前往修改密码！', '系统提示', {
            confirmButtonText: '确定',
            type: 'warning'
          }).then(() => {
            this.open = true
          }).catch(() => {
            this.loading.close();
          });


          //this.$message.error(res.msg)
        }
      }).catch(err => {
        this.$message.error(err)
      })


    },
    mounted() {

      setInterval(() => {
        this.updateClock()
      }, 1000)


      this.animateTimer = setInterval(this.showMarquee, 2000)
    },
    beforeDestroy() {
      clearInterval(this.animateTimer)
      this.animateTimer = null
    },
    methods: {

      /*一键下载\删除*/
      appAction(bool) {
        this.isAllIn = bool
        let ids = []
        this.appList.forEach(e => {
          e.applicationInfos.forEach(ele => {
            ids.push(ele.applicationInfoId)
          })
        })

        console.log(this.isAllIn)
        let payload = {
          applicationInfoIds: ids,
          status: this.isAllIn ? 1 : 0
        }

        setAppStatus(payload).then(res => {
          if(res.code === 200) {
            this.getAppsList()
            this.$message.success(res.msg)
          }else {}
        }).catch(err => {
          this.$message.error(err)
        })
      },

      /*获取进出口数*/
      getInOutQuantity() {
        getQuantity().then(res => {
          if (res.code === 200) {
            this.quantity = res.data
          } else {
          }
        }).catch(err => {
        })
      },

      /*获取报送类别占比*/
      getType() {
        getTypeRate().then(res => {
          if (res.code === 200) {
            let tempList = JSON.parse(JSON.stringify(res.data).replaceAll(/label/g, 'name'))
            let sum = 0
            tempList.forEach(e => {
              sum += e.value
            })
            this.setCharts(tempList, sum)
          }
        })
      },

      /*获取待办列表*/
      getTipsList(status) {
        this.tipsType = status
        getTipsListData(status).then(res => {
          if (res.code === 200) {
            this.tipsList = res.data
            this.tipsOptions = JSON.parse(JSON.stringify(res.data))
          }
        }).catch(err => {

        })
      },

      /*获取app list*/
      getAppsList() {
        getApps().then(res => {
          if (res.code === 200) {
            this.loading.close();
            let arr = []
            let arrAll = []
            this.list = res.data.filter(e => {
              e.isShow = false
              e.applicationInfos.forEach(ele => {
                arrAll.push(ele)
                if (ele.status === 1) {
                  arr.push(ele.status)
                  e.isShow = true
                }else {
                  // this.isAllIn = false
                }
              })
              return e.isShow
            })
            // console.log(arr.length === arrAll.length)
            if(arr.length === arrAll.length) {
              this.isAllIn = true
            }else {
              this.isAllIn = false
            }
            this.appList = res.data
            // console.log(arr)
            // this.loading = false
            this.$forceUpdate()
          } else {
            this.loading.close();
            // this.loading = false
          }
        }).catch(err => {
          this.loading.close();
          // this.loading = false
        })
      },

      /*获取工具集*/
      getToolsList() {
        getToolsListData().then(res => {
          if (res.code === 200) {
            this.toolList = res.data
          }
        }).catch(err => {
        })
      },

      /*获取app使用次数*/
      getAppsCountList() {
        getAppsCountListData().then(res => {
          if (res.code === 200) {
            this.rankList = res.data
          } else {

          }
        }).catch(err => {
        })
      },

      getLinkInfo() {
        let operation = 'sys.operation.contact'
        getLinkInfoData(operation).then(res => {
          if (res.code === 200) {
            this.operationLink = res.data
          } else {

          }
        }).catch(err => {

        })

        let technology = 'sys.technology.contact'
        getLinkInfoData(technology).then(res => {
          if (res.code === 200) {
            this.technologyLink = res.data
          } else {

          }
        }).catch(err => {

        })


      },

      handleClose(done) {
        done();
        /*this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});*/
      },

      updateClock() {
        var now = new Date(); // 获取当前时间
        var year = now.getFullYear()
        var month = (now.getMonth() + 1) % 12 === 0 ? 12 : (now.getMonth() + 1) % 12
        var day = now.getDate()
        var hours = now.getHours(); // 小时
        var minutes = now.getMinutes(); // 分钟
        var seconds = now.getSeconds(); // 秒钟

        // 确保时间数字不会超过10
        hours = (hours < 10 ? "0" : "") + hours;
        minutes = (minutes < 10 ? "0" : "") + minutes;
        seconds = (seconds < 10 ? "0" : "") + seconds;
        this.date = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
        this.$forceUpdate()
      },

      getUser() {
        getUserProfile().then(res => {
          this.user = res.data;
          console.log(this.user)

        });
      },

      goTarget(href) {
        window.open(href, "_blank");
      },

      getList() {
        getHomeList().then(res => {
          if (res.code === 200) {
            this.list = res.data
            this.loading.close();
          } else {
            this.loading.close();
            this.$message.error(res.msg())
          }
        }).catch(err => {
          this.loading.close();
          this.$message.error(err)
        })
      },

      navTo(item) {
        addUse(item.applicationInfoId).finally(() => {
          if (item.link.includes('http')) {
            const newWin = window.open(item.link, "_blank")
            fetch(item.link, {
              method: 'POST',
              body: "Bearer " + getToken(),
              headers: {
                'Content-Type': 'multipart/form-data',
              },
            }).then(data => {
              // 在新窗口中写入响应内容
              newWin.document.write(data);
            })
              .catch(error => console.error('Error:', error));

          } else {
            this.$router.push(item.link)
            // let routeUrl = this.$router.resolve({
            // path: "/feelings",
            // path: "/record",
            // path: item.link
            // });
            // window.open(routeUrl.href, '_blank');
          }
        })
      },

      //获取图片
      getImg(path) {
        let url = process.env.VUE_APP_BASE_API + path
        return url
      },

      async logout() {
        this.$confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            location.href = '/index';
          })
        }).catch(() => {
        });
      },

      pswCancel() {
        this.open = false
      },

      submit() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            changePassword(this.form).then(res => {
              if (res.code === 200) {
                this.open = false
                this.$message.success("修改密码成功")
              } else {
                // this.$message.success("傻逼")
                this.$message.error(res.msg)
              }
            }).catch(err => {
              // this.$message.success("傻逼")
              this.$message.error(err)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });


      },

      setCharts(data, sum) {
        let charts = this.$echarts.init(this.$refs.pieChart);
        let option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            bottom: '10%',
            left: 'center',
            height: 40,
            itemWidth: 8,
            itemHeight: 8,
            textStyle: {
              color: '#FFFFFF',
              rich: {
                b: {
                  width: 50,// 为 name 设置固定宽度
                }
              }
            },
            formatter: function (name) {
              let num;
              for (let i = 0; i < data.length; i++) {
                if (data[i].name === name) {
                  num = data[i].percent * 100
                }
              }
              let arr = [
                name.length > 4 ? name.substring(0, name.length - 2) : name,
                num.toFixed(2) + '%'
              ]
              return `{b|${arr[0]}} {a|${arr[1]}}`
            }
          },
          graphic: [{
            type: 'text',//控制内容为文本文字
            left: "center",//对齐方式居中
            top: "30%",//距离顶部
            style: {
              fill: '#999999',//控制字体颜色
              text: '总 计',//控制第一行字显示内容
              fontSize: '20px',
            }
          }, {
            type: 'text',
            left: "center",//对齐方式居中
            top: "40%",//距离顶部
            z: 10,
            style: {
              text: `${sum}`,
              font: 'Microsoft YaHei',
              fontSize: '40px',
              fontWeight: 700,
              lineHeight: 15,
              fill: '#FFFFFF',
            }
          }],
          series: [
            {
              color: ['#F05F00', '#FA8333', '#FFB27E', '#FFDBC5', '#FFFFFF', '#A7CCFF', '#6CAAFF', '#046DFF', '#1A92FF'],
              // color: ['#ffd851', '#ec5858', '#4562bf', '#95dc73'],
              type: 'pie',
              radius: ['40%', '45%'],
              center: ["50%", "40%"],
              avoidLabelOverlap: false,
              padAngle: 5,
              itemStyle: {
                borderRadius: 10
              },
              label: {
                show: false,
                position: 'center',

              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: 16,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: data
            }
          ]
        };

        charts.setOption(option)
      },

      handleAction(item, bool) {
        let payload = {
          applicationInfoId: item.applicationInfoId
        }
        upDateApp(payload).then(res => {

          if (res.code === 200) {
            this.getAppsList()
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          this.$message.error(err)
        })
      },

      cancel() {
        this.tipsOpen = false
        this.tipsForm = {}
      },

      onSubmit() {
        this.tipsForm.status = '0'

        this.handleAdd()
      },

      selectTips(item, i) {
        if (i === '0') {
          this.tipsForm.id = item.id
          this.tipsForm.status = '1'
          this.tipsForm.content = item.content
          this.tipsForm.shortNoteTime = item.shortNoteTime
          this.handleSub()
        }
        item.isSelect = !item.isSelect
      },

      handleSub() {
        addTips(this.tipsForm).then(res => {
          if (res.code === 200) {
            this.tipsForm = {}
            this.getTipsList(this.tipsType)
            if (!this.animateTimer) {
              this.animateTimer = setInterval(this.showMarquee, 2000)
            }
          } else {
          }
        }).catch(err => {
        })
      },

      handleAdd() {
        this.$refs.tipsForm.validate((valid) => {
          if (valid) {
            addTips(this.tipsForm).then(res => {
              if (res.code === 200) {
                this.tipsForm = {}
                this.getTipsList(this.tipsType)
                // this.$message.success(res.msg)
                if (!this.animateTimer) {
                  this.animateTimer = setInterval(this.showMarquee, 2000)
                }
              } else {
              }
            }).catch(err => {
            })
            // if(this.tipsForm.id) {
            //   addTips(this.tipsForm).then(res => {
            //     if(res.code === 200) {
            //       this.tipsForm = {}
            //       this.getTipsList(this.tipsType)
            //       // this.$message.success(res.msg)
            //       if (!this.animateTimer) {
            //         this.animateTimer = setInterval(this.showMarquee, 2000)
            //       }
            //     }else {}
            //   }).catch(err => {})
            // }else {
            //   addTips(this.tipsForm).then(res => {
            //     if(res.code === 200) {
            //       this.tipsForm = {}
            //       this.getTipsList(this.tipsType)
            //       // this.$message.success(res.msg)
            //       if (!this.animateTimer) {
            //         this.animateTimer = setInterval(this.showMarquee, 2000)
            //       }
            //     }else {}
            //   }).catch(err => {})
            // }
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },

      handleEdit(item) {
        item.canEdit = false
        this.$refs.editForm[0].validate((valid) => {
          if (valid) {
            addTips(this.editForm).then(res => {
              if (res.code === 200) {
                this.editForm = {}
                this.getTipsList(this.tipsType)
                if (!this.animateTimer) {
                  this.animateTimer = setInterval(this.showMarquee, 2000)
                }
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
              } else {
              }
            }).catch(err => {
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },

      handleBlueEdit(e, item) {
        if(item.canEdit) {
          this.$confirm('是否保存当前修改?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            item.canEdit = false
            this.$refs.editForm[0].validate((valid) => {
              if (valid) {
                addTips(this.editForm).then(res => {
                  if (res.code === 200) {
                    this.editForm = {}
                    this.getTipsList(this.tipsType)
                    if (!this.animateTimer) {
                      this.animateTimer = setInterval(this.showMarquee, 2000)
                    }
                    this.$message({
                      message: '操作成功',
                      type: 'success'
                    })
                  } else {
                  }
                }).catch(err => {
                })
              } else {
                console.log('error submit!!');
                return false;
              }
            })

          }).catch(() => {

          });
        }
      },
      handleOpenTipsDialog() {
        this.tipsOpen = true
      },
      showMarquee() {
        if (this.$refs.tipList.clientHeight > this.$refs.tipContainer.clientHeight) {
          this.animate = true
          this.tipsList.push(this.tipsList[0])
          setTimeout(() => {
            this.tipsList.shift()
            this.animate = false
          }, 1000)
        } else {
          clearInterval(this.animateTimer)
          this.animateTimer = null
        }
      },
      handleMouseEnter() {
        clearInterval(this.animateTimer)
        this.animateTimer = null
      },
      handleMouseLeave() {
        this.animateTimer = setInterval(this.showMarquee, 2000)
      },

      handelEdit(item, i) {
        if (item.status === '0') {
          item.canEdit = true
          this.editForm = {...item}
          this.$nextTick((_) => {
            this.$refs[`editInput${i}`][0].focus()
          })
        }
      },
      handleRemoveTip(item) {
        if (this.removeLoading) return


        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.removeLoading = true
          removeTip([item.id]).then(res => {
            this.getTipsList(this.tipsType)
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).finally(() => {
            this.removeLoading = false
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      }
    }
  };
</script>

<style scoped lang="scss">

  .tableScopeSwitch ::v-deep .el-switch__label {
    display: none;
    color: #fff;
  }
  /*打开时文字位置设置*/
  .tableScopeSwitch ::v-deep .el-switch__label--right {
    position: absolute;
    z-index: 1;
    right: 25px;    /*不同场景下可能不同，自行调整*/
    top: 0;
  }
  /*关闭时文字位置设置*/
  .tableScopeSwitch ::v-deep .el-switch__label--left {
    position: absolute;
    z-index: 1;
    left: 25px;    /*不同场景下可能不同，自行调整*/
    top: 0;
  }
  /*显示文字*/
  .tableScopeSwitch ::v-deep .el-switch__label.is-active {
    position: absolute;
    display: block;
    color: #FFFFFF;
  }

  ::v-deep .el-switch__core, ::v-deep .el-switch {
    width: 100px !important;
  }
/*  .tableScopeSwitch .el-switch ::v-deep .el-switch__core,
  .el-switch ::v-deep .el-switch__label {
    width: 200px !important;    !*开关按钮的宽度大小*!
  }*/

  .app-uninstall {
    color: #FFF;
    cursor: pointer;
    width: 100px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: lightcoral;
    padding: 0 !important;
    border-radius: 20px;
  }

  .app-install {
    color: #FFF;
    cursor: pointer;
    width: 100px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #89cf68;
    padding: 0 !important;
    border-radius: 20px;
  }

  .tip-item-container {
    //height: 304px;
    height: calc(100% - 41px);
    overflow-y: scroll;

    ul {
      padding: 0;
    }

    .marquee_top {
      transition: all 1s;
      margin-top: -47px;
    }
  }

  .tip-item-container::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  .tip-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 26px;

    .tip-circle {
      margin-right: 15px;
      width: 14px;
      height: 14px;
      border: 1px solid #2b4aa2;
      border-radius: 50%;
    }

    .tip-context {
      font-size: 14px;
      flex: 1;
      color: #FFFFFF;
      white-space: nowrap;
      overflow: hidden;
      /* 用于控制当内容溢出容器将被隐藏，不会显示在容器之外。*/
      text-overflow: ellipsis;
      /*用于控制当文本溢出容器时显示的样式，ellipsis值表示在文本溢出的地方显示省略号（...） */
    }
  }

  .app-container {
    padding: 0;
    background-image: url("~@/assets/images/bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    //min-height: 100vh;
    height: 100%;
  }

  .body-container {
    display: flex;
    justify-content: center;
    height: calc(100% - 105px);
    padding: 0 40px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .left-container {
    width: 368px;
    //height: 896px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;

    .left-model {
      width: 368px;
      margin-bottom: 8px;
      position: relative;

      .img-title {
        width: 245px;
        height: 41px;
        background-image: url("~@/assets/images/img-title.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: absolute;
        top: 0;
        left: 0;
        padding-left: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: PangMenZhengDao;
        font-size: 18px;
        color: #FFFFFF;
        line-height: 41px;

        .icon-style {
          margin-right: 40px;
          line-height: 41px;
          cursor: pointer;
        }
      }

      .left-model-container {
        margin-top: 15px;
        width: 368px;
        height: 375px;
        border: 1px solid transparent;
        border-image-source: url("../assets/images/model-bg.png");
        border-image-slice: 1 fill;
        border-image-repeat: stretch;
        color: white;

        .header-bar {
          float: right;
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 120px;
          height: 50px;

          .bar-title {
            flex: 1;
            font-family: PangMenZhengDao;
            font-size: 18px;
            color: #FFFFFF;
          }

          .bar-btn {
            display: flex;
            align-items: center;
            cursor: pointer;

            .bar-tips {
              width: 18px;
              height: 18px;
              background: #FF5555;
              font-family: DINAlternate-Bold;
              font-size: 14px;
              color: #FFFFFF;
              text-align: center;
              line-height: 16px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
            }
          }


        }


      }
    }
  }

  .right-container {
    width: 368px;
    //height: 896px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .right-model {
      width: 368px;
      height: calc(100% - 150px);
      position: relative;

      .img-title {
        width: 245px;
        height: 41px;
        background-image: url("~@/assets/images/img-title.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: absolute;
        top: 0;
        left: 0;
        padding-left: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: PangMenZhengDao;
        font-size: 18px;
        color: #FFFFFF;
      }

      .right-model-container {
        margin-top: 15px;
        width: 368px;
        //height: 716px;
        height: calc(100% - 21px);
        border: 1px solid transparent;
        border-image-source: url("../assets/images/rank-bg.png");
        border-image-slice: 1 fill;
        border-image-repeat: stretch;
        color: white;
        /*overflow-y: scroll;*/
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 53px;

        .app-item {
          width: 350px;
          height: 50px;
          background-image: url("~@/assets/images/rank-bar.png");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          margin-bottom: 16px;
          padding: 8px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .app-info {
            display: flex;
            align-items: center;

            .app-rank {
              width: 29px;
              height: 18px;
              background: linear-gradient(180deg, #091E5B 0%, #406797 100%);
              font-family: DINAlternate-Bold;
              font-size: 12px;
              color: #A4CBFB;
              text-align: center;
              margin-right: 14px;
              display: flex;
              align-items: center;
              justify-content: center;
              line-height: 18px;
            }

            .app-name {
              flex: 1;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #B9DEF5;
              line-height: 16px;
            }

            .app-time {
              display: flex;
              align-items: center;
              font-family: DINAlternate-Bold;
              font-size: 18px;
              text-align: right;

              .count-item {
                font-family: PingFangSC-Regular;
                font-size: 12px;
                line-height: 16px;
                margin-left: 6px;
              }
            }
          }

          .app-bar {
            width: 100%;
            height: 7px;
            background: rgba(113, 136, 183, 0.34);
            position: relative;

            .app-count {
              position: absolute;
              top: 0;
              left: 0;
              height: 7px;
            }
          }
        }
      }
    }
  }

  .tip-container {
    width: 368px;
    //height: 355px;
    height: calc(100% - 554px);
    //flex-grow: 1;
    padding: 0 16px 16px;
    border: 1px solid #072370;
    position: relative;

    .tip-model-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #FFFFFF;
      /*margin-top: 16px;*/

      .icon-style {
        margin-right: 40px;
        line-height: 41px;
        cursor: pointer;
        color: #FFFFFF
      }

      .btn-container {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        cursor: pointer;

        .btn {
          transition: 0.8s all;
        }

        .left-btn {
          background-image: url("~@/assets/images/left-btn.png");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 105px;
          height: 35px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #DBE7FF;
          line-height: 20px;
          text-align: right;
          font-style: normal;
        }

        .right-btn {
          background-image: url("~@/assets/images/right-btn.png");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 105px;
          height: 35px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #DBE7FF;
          line-height: 20px;
          text-align: right;
          font-style: normal;
        }

        .left-btn-select {
          background-image: url("~@/assets/images/left-btn-select.png");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 105px;
          height: 35px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #FABB8B;
          line-height: 20px;
          text-align: right;
          font-style: normal;
        }

        .right-btn-select {
          background-image: url("~@/assets/images/right-btn-select.png");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 105px;
          height: 35px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #FABB8B;
          line-height: 20px;
          text-align: right;
          font-style: normal;
        }

      }

      .more {
        cursor: pointer;
      }
    }
  }

  .normal-model {
    width: 368px;
    padding: 14px 11px;
    //margin-bottom: 8px;
    border: 1px solid #072370;

    .model-label {
      width: 100%;
      background-image: linear-gradient(270deg, rgba(69, 147, 255, 0.00) 0%, rgba(69, 117, 255, 0.40) 99%);
      /*background: linear-gradient(90deg, #9eb2ee 0%, #e4e4e4 100%);*/
      display: flex;
      align-items: center;
      padding: 6px 0 6px 11px;

      font-family: PangMenZhengDao;
      font-size: 18px;
      color: #FFFFFF;

      .circle {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #FFB685;
        box-shadow: 0 0 4px 0 #FFB685;
        margin-right: 9px;
      }
    }

    .tip {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #DDF2FF;
      line-height: 24px;
      margin-top: 19px;
    }

    .model-body {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-top: 24px;

      .model-item {
        width: 50%;
        display: flex;
        align-items: center;

        .item-icon {
          width: 50px;
          height: 50px;
          margin-right: 12px;
        }

        .item-small-icon {
          width: 14px;
          height: 14px;
        }

        .info {
          .info-label {
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #A1B0D4;
          }

          .info-value {
            font-family: DINAlternate-Bold;
            font-size: 18px;
            color: #FFB687;
          }

          .info-msg {
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #EAF7FF;
            line-height: 24px;
          }
        }
      }
    }
  }

  .model-container {
    //height: 896px;
    //min-width: 1056px;
    flex-grow: 1;
    margin: 0 30px;

    /*flex: 1*/
    .model-content {
      height: calc(100% - 74px);
      padding: 58px 0px;
      background-image: url("~@/assets/images/model-container.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
      overflow: hidden;
    }
  }

  .bottom-banner {
    height: 74px;
    width: 856px;
    background-image: url("~@/assets/images/bottom-banner.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;

    .tab {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      .tab-icon {
        width: 45px;
        height: 49px;
        margin-right: 13px;
      }

      .tab-label {
        font-family: PangMenZhengDao;
        font-size: 18px;
        color: #FFFFFF;
      }

      &:first-of-type {
        margin-right: 100px;
      }
    }
  }

  .model-container::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  .model-container {
    div::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
    }
  }

  .top-banner {
    width: 100vw;
    height: 85px;
    background-image: url("~@/assets/images/top-banner.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;

    font-family: PangMenZhengDao;
    font-size: 41px;
    color: #FFFFFF;
    text-align: center;

    .banner-date {
      font-family: DINAlternate-Bold;
      font-size: 20px;
      color: #E6F7FF;
      position: absolute;
      top: 64px;
      left: 26px;
    }

    .banner-user {
      font-family: PangMenZhengDao;
      font-size: 20px;
      color: #E6F7FF;
      position: absolute;
      top: 13px;
      right: 32px;
    }

    .banner-user-avatar {
      float: left;
      width: 30px;
      height: 30px;
      margin-right: 14px;
      line-height: 30px;
      text-align: center;
      background-color: #409EFF;
      border-radius: 50%;
      border: 1px solid #fff;
    }
  }

  .model {
    position: relative;
    margin: 30px 26px;
    width: calc(100% - 120px);

    &:first-of-type {
      margin-top: 0;
    }

    .model-title {
      width: 265px;
      background-image: linear-gradient(270deg, rgba(69, 147, 255, 0.00) 0%, rgba(69, 117, 255, 0.40) 99%);
      display: flex;
      align-items: center;
      padding: 6px 0 6px 11px;

      font-family: PangMenZhengDao;
      font-size: 16px;
      color: #FFFFFF;

      .circle {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #FFB685;
        box-shadow: 0 0 4px 0 #FFB685;
        margin-right: 9px;
      }
    }

    .list-container {
      /*height: 198px;*/
      padding-top: 33px;
      /*background-image: url("~@/assets/images/item-list.png");*/
      /*background-repeat: no-repeat;*/
      /*!*background-size: cover;*!*/
      /*background-size: 100% 100%;*/
      /*background-position: center;*/

      .item-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 168px;
        cursor: pointer;

        &:hover {
          .icon-container {
            transform: rotateY(180deg);
          }
        }

        .icon-container {
          width: 75px;
          height: 75px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: 1.5s all;
          /**background-image: url("~@/assets/images/circle.png");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;*/
        }

        .item-name {
          margin-top: 13px;
          font-family: PingFangSC-Medium;
          font-size: 16px;
          color: #E6F7FF;
          text-align: center;
        }
      }
    }
  }

  .avatar-container {
    /*margin-right: 32px;*/
    margin-right: 0;
    position: relative;

    .avatar-wrapper {
      margin-top: 5px;
      position: relative;
      display: flex;
      align-items: center;
      font-family: PangMenZhengDao;
      font-size: 20px;
      color: #E6F7FF;
      letter-spacing: 0;

      .user-avatar {
        cursor: pointer;
        /*width: 30px;*/
        height: 30px;
        border-radius: 15px;
        margin-right: 13px;
      }

      .el-icon-caret-bottom {
        cursor: pointer;
        margin-left: 56px;
        /*position: absolute;
          right: -20px;
          top: 25px;*/
        font-size: 12px;
      }
    }
  }

  .empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /*width: 100vw;*/
    position: relative;

    .empty-container {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      flex-direction: column;
      color: #FFFFFF;

      img {
        margin-bottom: 24px;
      }
    }
  }

  .tool-item {
    display: flex;
    align-items: center;
    padding: 0 30px;
    margin-bottom: 27px;

    .tool-img {
      height: 44px;
      width: 44px;
      margin-right: 22px;
    }

    .tool-name {
      flex: 1;
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #F9FDFF;
    }

    .tool-btn {
      width: 64px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(40, 92, 208, 0.19);
      border: 1px solid rgba(7, 76, 157, 0.79);
      border-radius: 3px;
      font-family: PingFangSC-Regular;
      font-size: 13px;
      color: #F9FDFF;
      text-align: center;
      cursor: pointer;
    }
  }

  .app-item-container {
    padding: 0 30px;

    .app-model {
      width: inherit;

      .model-title {
        width: 231px;
        background-image: linear-gradient(270deg, rgba(69, 147, 255, 0.00) 0%, rgba(69, 117, 255, 0.40) 99%);
        display: flex;
        align-items: center;
        padding: 6px 0 6px 11px;
        font-family: PangMenZhengDao;
        font-size: 16px;
        color: #FFFFFF;
        margin: 13px 0 27px;

        .circle {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #FFB685;
          box-shadow: 0 0 4px 0 #FFB685;
          margin-right: 9px;
        }
      }

      .app-model-item {
        display: flex;
        align-items: center;
        margin-bottom: 27px;

        .app-img {
          height: 44px;
          width: 44px;
          margin-right: 22px;
        }

        .app-name {
          flex: 1;
          font-family: PingFangSC-Regular;
          font-size: 16px;
          color: #F9FDFF;
        }

        .app-btn {
          width: 64px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(40, 92, 208, 0.19);
          border: 1px solid rgba(7, 76, 157, 0.79);
          border-radius: 3px;
          font-family: PingFangSC-Regular;
          font-size: 13px;
          color: #F9FDFF;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }

  .app-item-footer {
    width: 100%;
    height: 60px;
    /*background-color: #FFF;*/
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(7, 76, 157, 0.3);

    .footer-btn {
      /*padding: ;*/

      &:first-of-type {
        margin-right: 20px;
      }
    }

    .check-btn {
      background: rgba(24, 91, 244, .19);
      border: 1px solid rgba(7, 76, 157, .79);
      padding: .3125vw .72917vw;
      border-radius: .15625vw;
      cursor: pointer;
      color: #f9fdff;
      font-size: .72917vw;
      font-family: PangMenZhengDao;
    }

    .is-disabled {
      color: #9fa2a9;
      border: 1px solid #e1e4eb;
      background-color: #FFFFFF;
      cursor: not-allowed;
      font-size: .72917vw;
      padding: .3125vw .72917vw;
      border-radius: .15625vw;
      font-family: PangMenZhengDao;
    }
  }

  .tip-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    width: 945px;
    height: 632px;
    background: #010418;
    z-index: 999;
    opacity: 1;
    transition: 0.3s all ease-in;
    box-shadow: 0 2px 23px 0 rgba(0, 65, 179, 0.50);
    border: 0.5px solid #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;

    .close-icon {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 12px;
      height: 12px;
      cursor: pointer;
    }

    .tips-left,
    .tips-right {
      height: inherit;
      position: relative;

      .tips-title {
        font-family: PingFangSC-Medium;
        font-size: 18px;
        margin: 24px 0 20px;
        display: flex;
        align-items: center;

        .tab-normal {
          color: #F5F6F9;
          margin-right: 12px;
          cursor: pointer;
        }

        .tab-select {
          color: #999999;
          margin-right: 12px;
          cursor: pointer;
        }
      }
    }

    .tips-left {
      width: 364px;

      .form-container {
        width: inherit;
        height: 532px;
        border-radius: 8px;
        position: relative;
        /*background: #FFFFFF;*/
      }
    }

    .tips-right {
      width: 445px;

      .tips-list {
        width: inherit;
        height: 532px;
        border-radius: 8px;
        position: relative;
        background: #37384B;
        overflow-y: scroll;

        &::-webkit-scrollbar {
          width: 0;
          height: 0;
        }

        .list-item {
          border-bottom: 1px solid #4F5065;
          padding: 18px;
          display: flex;
          align-items: flex-start;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #FFFFFF;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          .select-circle,
          .normal-circle {
            margin-right: 12px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .select-circle {
            background: #FAA26A;
            border: 1px solid #FAA26A;

            .check-icon {
              color: white;
              font-size: 10px;
            }
          }

          .normal-circle {
            background: transparent;
            border: 1px solid #B9B9B9;
          }

          .tip-text {
            max-width: calc(100% - 40px);
            flex: 1;
            white-space: pre-wrap;
            /*text-overflow: ellipsis;*/
            /*overflow: hidden;*/

            .tip-date {
              margin-top: 8px;
              color: rgba(255, 255, 255, .4);
            }
          }

          &:last-of-type {
            border: none;
          }
        }
      }
    }

    /*    .tips-right {
            width: 445px;
            height: inherit;
            height: 532px;
            background: #37384B;
            border-radius: 8px;
            position: relative;
          }*/

    .arrow-icon {
      width: 36px;
      height: 36px;
    }
  }

  .hide-dialog {
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    /*transition: 0.3s all ease-in;*/
  }

  .pieChart {
    height: 188px;
    width: 330px;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("~@/assets/images/pie.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  ::v-deep .el-textarea__inner {
    height: 402px;
    border: none;
    padding: 17px;
  }

  /*::v-deep .el-button--medium {*/
  /*  margin: 0 20px 20px 0;*/
  /*  float: right;*/
  /*}*/

  ::v-deep .el-icon-caret-bottom {
    margin-left: 10px !important;
  }

  ::v-deep .el-drawer {
    background-color: #02051e;
  }

  ::v-deep .el-drawer__header {
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #FFFFFF;
  }

  ::v-deep .is-horizontal {
    display: none;
  }

  ::v-deep .scrollbar-wrapper {
    .el-scrollbar__view {
      overflow-x: hidden !important;
    }

    overflow-x: hidden !important;
  }

  ::v-deep .el-input {
    width: 100% !important;
  }
</style>
